<template>
	<view class="conpage">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7"
			 title="预约单" rightIcon="compose" @clickRight="goRight"/>
		<view class="input-group searchInput" style="display: flex;position: relative;margin: 20px 0 10px 0;">
			<input @focus="searchFocus()" @blur="searchBlur()" @input="searchChange" :class="idSearchFocus ? 'searchFocus': ''" style="width: 88%;margin: 0 auto;padding: 0 !important;" v-model="materialName" name="materialName" placeholder="输入想要搜索的物料名称" />
			<image @click="closeOrSearch()" :class="idSearchFocus ? 'searchClose':'searchIcon'" :src="searchIcon" mode=""></image>
			<view v-if="searchList.length > 0" class="searchDown">
				<view @click="searchItemClick(item)" v-for="(item,index) in searchList" class="searchDownItem">{{item.fgoodname}}</view>
			</view>
		</view>
		<view class="control">
			<view :class="current == 0 ? 'control_Down' : 'control_Btn'" @click="onClickItem(0)">新建预约单</view>
			<view :class="current == 1 ? 'control_Down' : 'control_Btn'" @click="onClickItem(1)">历史记录</view>
		</view>
		<view v-if="current == 0" style="width: 100%;height: 100%;">
			<view style="display: flex;height: 100%;">
				<view style="width: 50px;height: 100%;margin: 5px 0 0 5px;">
					<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 310px);overflow-y: auto;marginTop: 0px" >
						<view class="cabAll" @touchmove.stop>
							<view @click="tabClick(item)" v-for="(item,index) in tabList" :class="tabId == item.fcabbarcode ? 'cabClick': 'cab'">
								<view class="cabText">{{item.fcabname}}</view>
								<view v-if="tabId == item.fcabbarcode" :style="{'width': '4px','height': '100%','borderRadius': '2px','backgroundColor': item.fdictmemo,'marginTop': '2px'}"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 所有物料 -->
				<view class="material_all">
					<view style="display: flex;margin: 6px;">
						<view class="material_title">化学品名</view>
						<view class="material_titleNumber">库存数量</view>
					</view>
					<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 353px);overflow-y: auto;marginTop: 0px" >
						<view v-if="searchmaterialList.length > 0">
							<view style="position: relative;" v-for="(item,index) in searchmaterialList">
								<view v-if="item.demo8" class="materialPopUp">
									<view class="success_title">
										<view>
											<image style="max-width: 23px;max-height: 23px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/prompt.png" mode=""></image>
											<text class="success_text">提示</text>
										</view>
										<view>
											<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
										</view>
									</view>
									<view class="success_content">
										{{editMaterial.fgoodname}}库存剩余{{editMaterial.f5}}ml，预约量超过库存。
									</view>
								</view>
								<view v-if="item.demo8" class="triangle"></view>
								<view class="material_line">
									<view style="width: 35%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.fgoodname}}</view>
									<view style="width: 25%;">{{item.f5}}</view>
									<view style="width: 40%;">
										<view style="width: 70%;display: flex;align-items: center;">
											<view @click="editMaterialReduce(item)" class="reduce_btn">
												<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/reduce.png" mode=""></image>
											</view>
											<input @input="editMaterialChange(item)" type="number" v-model='item.fdictmemo'  class="text_btn">
											</input>
											<view @click="editMaterialAdd(item)" class="add_btn">
												<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/add.png" mode=""></image>
											</view>
										</view>
										<!-- <image @click="addMaterial(item)" style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/add.png" mode=""></image> -->
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view style="position: relative;" v-for="(item,index) in materialList">
								<view v-if="item.demo8" class="materialPopUp">
									<view class="success_title">
										<view>
											<image style="max-width: 23px;max-height: 23px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/prompt.png" mode=""></image>
											<text class="success_text">提示</text>
										</view>
										<view>
											<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
										</view>
									</view>
									<view class="success_content">
										{{editMaterial.fgoodname}}库存剩余{{editMaterial.f5}}ml，预约量超过库存。
									</view>
								</view>
								<view v-if="item.demo8" class="triangle"></view>
								<view class="material_line">
									<view style="width: 35%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.fgoodname}}</view>
									<view style="width: 25%;">{{item.f5}}</view>
									<view style="width: 40%;">
										<view style="width: 70%;display: flex;align-items: center;">
											<view @click="editMaterialReduce(item)" class="reduce_btn">
												<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/reduce.png" mode=""></image>
											</view>
											<input @input="editMaterialChange(item)" type="number" v-model='item.fdictmemo' class="text_btn">
											</input>
											<view @click="editMaterialAdd(item)" class="add_btn">
												<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/add.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view v-if="materialList.length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 50px;">
							暂无数据
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view v-if="current == 1" style="width: 100%;height: 100%;">
			<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 308px);overflow-y: auto;marginTop: 0px"  @touchmove.stop>
				<view v-for="(e,index) in dataList" style="width: 100%;padding: 0 16px;box-sizing: border-box;">
					<view class="dateSty">{{e.date}}</view>
					<view  v-for="(item,indexs) in e.list" class="useTopAll">
						<view class="use_line">
							<view class="use_content">
								单据编号：
								<text >
									{{item.fbillno}}
								</text>
							</view>
						</view>
						<view @click="detail(item)" class="useAll">
							<view style="display: flex;justify-content: space-between;">
								<view>
									<text class="use_content">
										{{item.towername}}
									</text>
								</view>
								<view v-if="item.fbillstate == 1" class="use_time_audit">
									<view style="color: #D60000" v-if="item.overtime == '超时'">超时未批复</view>
									<view v-else>审核中...</view>
								</view>
								<view v-else-if="item.fbillstate == 2" class="use_time_agree">
									审核通过
								</view>
								<view v-else-if="item.fbillstate == 3" class="use_time_timeout">
									拒绝
								</view>
								<view v-else-if="item.fbillstate == 8" class="use_time_timeout">
									已取消
								</view>
							</view>
							<view class="use_content">
								{{item.fpointName}}
							</view>
							<view style="opacity: 0.8;" class="use_content">
								申请人<text style="opacity: 1;margin-left: 4px;">{{item.username}}</text>
							</view>
							<view style="opacity: 0.8;" class="use_content">
								申请物品<text style="opacity: 1;margin-left: 4px;">共{{item.fcount}}件</text>
							</view>
						</view>
						<view @click.stop="cancelAgain(item)" v-if="item.fbillstate == 1 && item.overtime == '超时'" class="cancelBtn">
							<image style="max-width: 23px;max-height: 23px;" src="../../static/image/searchClose.png" mode=""></image>
						</view>
						<view @click.stop="submitAgain(item)" v-if="item.fbillstate == 1 && item.overtime == '超时'" class="timeoutBtn">
							<image style="max-width: 20px;max-height: 20px;" src="../../static/image/resubmit.png" mode=""></image>
						</view>
					</view>	
				</view>	
				<view v-if="dataList.length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 50px;">
					暂无数据
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tabBar_all">
			<view @click="tabOneClick()" class="tarBar_item">
				<image class="tabBar_icon" :src="tabOne" mode=""></image>
			</view>
			<view class="tarBar_item">
				<image class="tabBar_icon" :src="tabTwo" mode=""></image>
			</view>
			<view @click="tabThreeClick()" class="tarBar_item">
				<image class="tabBar_icon" :src="tabThree" mode=""></image>
			</view>
		</view>
		<!-- 确定取消弹窗 -->
		<view v-if="isOut" class="shadow"></view>
		<view v-if="isOut" class="out_all">
			<view class="out_title">{{shadowTitle}}</view>
			<view class="out_text">
				{{shadowContent}}
			</view>
			<view style="margin-top: 50px;display: flex;justify-content: space-between;">
				<view class="cancel" @click="cancelShadow()">取消</view>
				<view class="confirm" @click="confirmShadow()">确定</view>
			</view>
		</view>
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				tabOne: '/static/image/home1.png',
				tabTwo: '/static/image/record.png',
				tabThree: '/static/image/me1.png',
				searchIcon: '../../static/image/search.png',
				idSearchFocus: false, // 搜索框获取焦点
				searchList: [], // 搜索列表
				materialName: '', // 搜索栏选择内容
				tabList:[], // 储物柜
				tabId: null, // 储物柜所点击按钮id
				dataList: [] ,// 预约历史列表
				current: 0, // 新建预约单0  历史记录1
				materialList:[], // 所有物料列表
				searchmaterialList:[], // 搜索物料列表
				selectMaterialList: [], // 所选物料列表
				isAddMaterial: false, // 添加物料弹窗 弹出ture  关闭false
				selectMaterial: {},  //当前所选择的物料--编辑数量
				editMaterial: {}, // 物料超量提示信息
				isPrompt: false, //是否提示
				isOut: false, // 是否显示弹窗
				shadowTitle: '', // 弹窗标题
				shadowContent: '', // 弹窗内容
				shadowDate: null, // 弹窗当前所选择的数据
				isSuccess: null, // 报错/成功提示内容
				successContent: '', // 报错/成功提示内容
				addTime: null, // 添加页面时间暂存
			}
		},
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			console.log('that.sysInfo',that.sysInfo)
			let ds
			let addmaterial
			try {
				ds = JSON.parse(decodeURIComponent(e.item));
				addmaterial = JSON.parse(decodeURIComponent(e.addmaterial));
			} catch (error) {}
			that.addTime = ds
			if(addmaterial){
				that.selectMaterialList = addmaterial
			}
			console.log('ds',ds)
			that.getList()
			that.getTab()
		},
		methods: {
			// 物料减
			editMaterialReduce(item){
				if(item.fdictmemo - 1 >= 0){
					item.fdictmemo -= 1
				}
				console.log('item',item)
				that.editMaterial = item
				if(item.fdictmemo > item.f5){
					item.fdictmemo = item.f5
					that.prompt(item)
				}
			},
			// 物料内容修改
			editMaterialChange(item){
				console.log('item',item)
				that.editMaterial = item
				if(item.fdictmemo > item.f5){
					item.fdictmemo = item.f5
					that.prompt(item)
				}
			},
			// 物料加
			editMaterialAdd(item){
				console.log('item',item)
				that.editMaterial = item
				item.fdictmemo += 1
				if(item.fdictmemo > item.f5){
					item.fdictmemo = item.f5
					that.prompt(item)
				}
			},
			prompt(item){
				item.demo8 = true
				console.log('that.isPrompt',that.isPrompt)
				setTimeout(function(){
					let temp = []
					if(that.searchmaterialList.length > 0){
						that.searchmaterialList.forEach(e =>{
							if(e.fgoodno == that.editMaterial.fgoodno){
								e.demo8 = false
							}
							temp.push(e)
						})
						that.searchmaterialList= Object.assign([], temp);
					}else{
						that.materialList.forEach(e =>{
							if(e.fgoodno == that.editMaterial.fgoodno){
								e.demo8 = false
							}
							temp.push(e)
						})
						that.materialList= Object.assign([], temp);
					}
					
				},2000)
			},
			close(){
				let temp = []
				if(that.searchmaterialList.length > 0){
					that.searchmaterialList.forEach(e =>{
						if(e.fgoodno == that.editMaterial.fgoodno){
							e.demo8 = false
						}
						temp.push(e)
					})
					console.log('temp',temp)
					that.searchmaterialList= Object.assign([], temp);
				}else{
					that.materialList.forEach(e =>{
						if(e.fgoodno == that.editMaterial.fgoodno){
							e.demo8 = false
						}
						temp.push(e)
					})
					console.log('temp',temp)
					that.materialList= Object.assign([], temp);
				}
				
			},
			getTab(){
				// 储物柜列表
				that.$http.get('material/warehouseInv/getChhuwuguiList', {
					fsiteNo: that.sysInfo.fsiteNo,
					fpointNo: that.sysInfo.labNo,
				}).then(e => {
					console.log('e111',e)
					that.tabList = e.list
					that.tabId = e.list[0].fcabbarcode
					that.getMaterialList(e.list[0].fcabbarcode)
				}).catch(()=>{
					that.tabList = []
				})
			},
			tabClick(item){
				that.tabId = item.fcabbarcode
				that.getMaterialList(item.fcabbarcode)
			},
			// 根据储物柜获取物料列表
			getMaterialList(fcabbarcode){
				that.$http.get('material/warehouseInv/getWarehouseInvList2', {
					fsiteNo: that.sysInfo.fsiteNo,
					fpointNo: that.sysInfo.labNo,
					fcabbarcode:fcabbarcode
				}).then(e => {
					console.log('e222',e)
					that.materialList = e.list
					console.log('that.selectMaterialList',that.selectMaterialList)
					if(that.selectMaterialList.length > 0){
						that.selectMaterialList.forEach((item)=>{
							that.materialList.forEach((e)=>{
								if(item.fgoodno == e.fgoodno){
									if(item.fretqty > 0){
										e.fdictmemo = item.fretqty
									}else{
										e.fdictmemo = 0
									}
								}
							})
						})
					}else{
						that.materialList.forEach((e)=>{
							e.fdictmemo = 0
						})
					}
				}).catch(()=>{
					that.materialList = []
				})
				
			},
			// 按钮切换
			onClickItem(e) {
				console.log('eee',e)
				if (that.current !== e) {
					that.current = e
					if(e == 1){
						that.getList()
						if(that.selectMaterialList.length > 0){
							that.materialList.forEach((item)=>{
								that.selectMaterialList.forEach((e)=>{
									if(item.fgoodno == e.fgoodno){
										if(item.fdictmemo > 0){
											e.fretqty = item.fdictmemo
										}else{
											e.fretqty = 0
										}
									}
								})
							})
						}else{
							that.materialList.forEach((item)=>{
								that.selectMaterialList.push(
								{
									fgoodno: item.fgoodno,
									fgoodname: item.fgoodname,
									fqty: item.f5,
									fretqty: item.fdictmemo,
									fboxbarcode: item.fboxbarcode,
									fboxbarcodeName: item.fequipmenttag,
									fbuyprice: item.fbuyprice,
									fcabbarcode: item.fcabbarcode,
									fcabbarcodeName: item.fcabname,
									fline: null,
									frfidbarcode: item.frfidbarcode,
									fuseqty: 0
								})
							})
						}
					}else{
						that.getTab()
					}
				}
			},
			// 获取预约历史记录
			getList(){
				that.$http.get('material/useHead/getITcUseHeadList', {
					fuseuser: that.sysInfo.userId,
					fpointNo: that.sysInfo.labNo,
					froleid: that.sysInfo.froleid
				}).then(e => {
					console.log('e222',e)
					that.dataList = e.list
				}).catch(()=>{
					that.dataList = []
				})
			},
			// 搜索框获取焦点
			searchFocus(){
				that.idSearchFocus = true
				that.searchIcon = '../../static/image/searchClose.png'
			},
			// 搜索框失去焦点
			searchBlur(){
			},
			searchChange(value){
				console.log('333',value.detail)
				if(value.detail.value){
					that.$http.get('material/goodInfo/list', {
						fsiteNo: that.sysInfo.fsiteNo,
						fgoodname: value.detail.value
					}).then(e => {
						that.searchList = e.list
					}).catch(()=>{
						that.searchList = []
					})
				}
			},
			// 点击所选
			searchItemClick(item){
				that.materialName = item.fgoodname
				that.searchIcon = '../../static/image/search.png'
				that.idSearchFocus = false
				that.searchList = []
				
				that.$http.get('material/warehouseInv/getWarehouseInvList2', {
					fsiteNo: that.sysInfo.fsiteNo,
					fpointNo: that.sysInfo.labNo,
					fcabbarcode: that.tabId,
					fgoodname: item.fgoodname
				}).then(e => {
					console.log('e333',e.list)
					that.searchmaterialList = e.list
					console.log('that.selectMaterialList111',that.selectMaterialList)
					if(that.selectMaterialList.length > 0){
						that.selectMaterialList.forEach((item)=>{
							that.searchmaterialList.forEach((e)=>{
								if(item.fgoodno == e.fgoodno){
									if(item.fretqty > 0){
										e.fdictmemo = item.fretqty
									}else{
										e.fdictmemo = 0
									}
								}
							})
						})
					}else{
						that.searchmaterialList.forEach((e)=>{
							e.fdictmemo = 0
						})
					}
					
				}).catch(()=>{
					that.searchmaterialList = []
				})
			},
			closeOrSearch(){
				if(that.searchIcon == '../../static/image/searchClose.png'){
					that.searchIcon = '../../static/image/search.png'
					that.materialName = ''
					that.idSearchFocus = false
					that.searchList = []
					if(that.selectMaterialList.length > 0){
						that.selectMaterialList.forEach((item)=>{
							if(that.searchmaterialList.length > 0){
								that.searchmaterialList.forEach((e)=>{
									if(e.fgoodno == item.fgoodno){
										item.fretqty = e.fdictmemo
									}
								})
								
							}
						})
					}else{
						
							if(that.searchmaterialList.length > 0){
								that.searchmaterialList.forEach((item)=>{
									that.materialList.forEach((e)=>{
										if(e.fgoodno == item.fgoodno){
											e.fdictmemo = item.fdictmemo
										}
									})
								})
								that.materialList.forEach((item)=>{
									that.selectMaterialList.push({
										fgoodno: item.fgoodno,
										fgoodname: item.fgoodname,
										fqty: item.f5,
										fretqty: item.fdictmemo,
										fboxbarcode: item.fboxbarcode,
										fboxbarcodeName: item.fequipmenttag,
										fbuyprice: item.fbuyprice,
										fcabbarcode: item.fcabbarcode,
										fcabbarcodeName: item.fcabname,
										fline: null,
										frfidbarcode: item.frfidbarcode,
										fuseqty: 0
									})
								})
							}
					}
					
					that.searchmaterialList = []
					that.getMaterialList(that.tabId)
				}
			},
			// 重新提交
			submitAgain(item){
				that.isOut = true
				that.shadowTitle = '重新提交'
				that.shadowContent = '确实重新提交该申请吗？'
				that.shadowDate = Object.assign({}, item) 
			},
			cancelAgain(item){
				that.isOut = true
				that.shadowTitle = '取消申请'
				that.shadowContent = '确实取消该申请吗？'
				that.shadowDate = Object.assign({}, item) 
			},
			// 取消
			cancelShadow(){
				that.isOut = false
			},
			// 关闭成功失败弹窗
			successClose(){
				that.isSuccess = null
			},
			// 确定
			confirmShadow(){
				that.isOut = false
				console.log('that.shadowTitle',that.shadowTitle)
				if(that.shadowTitle == '重新提交'){
					that.$http.get('data/area/getFbillno', {
						flag: 2026
					}).then(e => {
						console.log('shadowDate',that.shadowDate)
						let details = that.shadowDate.details
						let temp = Object.assign({}, that.shadowDate)  
						console.log('details',details)
						temp.fbillno = e;
						// 第二天格式化
						let nextDay = moment(new Date()).add(1, 'days').format('YYYY-MM-DD')
						let begtime = nextDay + ' '+ moment(temp.frealbegtime).format('HH:mm:ss')
						let endtime = nextDay + ' '+ moment(temp.frealendtime).format('HH:mm:ss')
						console.log('111',begtime)
						console.log('111',endtime)
						temp.fplanusedate = moment(new Date()).add(1, 'days').format()
						temp.frealbegtime = moment(new Date(begtime)).format()
						temp.frealendtime = moment(new Date(endtime)).format()
						temp.details = details
						console.log('temp',temp)
						that.$http.postData('material/useHead/create',temp).then(e => {
							that.isSuccess = 0
							that.successContent ='该数据重新提交成功'
							setTimeout(function(){
								that.isSuccess = null
								that.getList()
							},2000)
						}).catch(()=>{
							that.isSuccess = 1
							that.successContent ='该数据重新提交失败'
							setTimeout(function(){
								that.isSuccess = null
							},2000)
						})
						
					}).catch(()=>{
						that.isSuccess = 1
						that.successContent ='该数据重新提交失败'
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					let temp = Object.assign({}, that.shadowDate)
					temp.fbillstate = 8
					that.$http.postData('material/useHead/update',temp)
					.then(e => {
						that.isSuccess = 0
						that.successContent ='该数据已取消'
						setTimeout(function(){
							that.isSuccess = null
							that.getList()
						},2000)
					}).catch(()=>{
						that.isSuccess = 1
						that.successContent ='该数据取消失败'
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}
			},
			// 跳转明细页面
			detail(item){
				console.log('item',item)
				this.$util.pageTo('scence/detail?item=' + encodeURIComponent(JSON.stringify(item)))
			},
			// 首页跳转
			tabOneClick(){
				that.$util.redirectTo('index/index');
			},
			// 我的跳转
			tabThreeClick(){
				that.$util.redirectTo('me/index');
			},
			goRight(){
				console.log('that.addTime',that.addTime)
				that.selectMaterialList = []
				console.log('that.searchmaterialList[0]',that.searchmaterialList[0])
				that.materialList.forEach((item)=>{
					if(that.searchmaterialList.length > 0){
						that.searchmaterialList.forEach((e)=>{
							if(e.fgoodno == item.fgoodno){
								item.fdictmemo = e.fdictmemo
							}
						})
						
					}
				})
				that.materialList.forEach((item)=>{
					that.selectMaterialList.push(
					{
						fgoodno: item.fgoodno,
						fgoodname: item.fgoodname,
						fqty: item.f5,
						fretqty: item.fdictmemo,
						fboxbarcode: item.fboxbarcode,
						fboxbarcodeName: item.fequipmenttag,
						fbuyprice: item.fbuyprice,
						fcabbarcode: item.fcabbarcode,
						fcabbarcodeName: item.fcabname,
						fline: null,
						frfidbarcode: item.frfidbarcode,
						fuseqty: 0
					})
				})
				this.$util.pageTo('scence/addOrder?item=' + encodeURIComponent(JSON.stringify(that.selectMaterialList))+ '&addTime=' + encodeURIComponent(JSON.stringify(that.addTime)))
			}
		}
	}
</script>

<style>
	@import url("index.css");
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
	}
	.out_all{
		width: 85%;
		margin: 0 auto;
		height: 200px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 28%;
		bottom: 0;
		padding: 16px;
	}
	.out_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 40px;
		/* identical to box height, or 167% */
		color: #113A62;
		margin-top: 15px;
	}
	.out_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin: 12px 0 0 10px;
	}
	
	.cancel{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.confirm{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.searchClose{
		max-width: 25px;
		max-height: 25px;
		position: absolute;
		top: 11px;
		right: 35px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 8px;
	}
	.searchIcon{
		max-width: 25px;
		max-height: 25px;
		position: absolute;
		top: 11px;
		right: 35px;
	}
	.searchDown{
		width: 92%;
		background-color: #E3EDF7;
		position: absolute;
		top: 49px;
		left: 4%;
		z-index: 9999;
		max-height: 300px;
		overflow-y: auto;
	}
	
	.searchDownItem{
		background: #E3EDF7;
		border-radius: 0px;
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		border-bottom: 1px solid #fff;
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		color: #113A62;
	}
	.use_line{
		display: flex;
		justify-content: space-between;
		background: #E8F0F8;
		border-radius: 4px 4px 0px 0px;
		padding: 2px 0px 0px 16px;
		box-sizing: border-box;
	}
	.useTopAll{
		width: 100%;
		/* height: 137px; */
		margin: 20px auto;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 0px 0px 4px 4px;
		position: relative;
	}
	.useAll{
		width: 100%;
		/* height: 137px; */
		margin: 0px auto;
		border-radius: 0px 0px 4px 4px;
		padding: 8px 16px 24px 16px;
		box-sizing: border-box;
	}
	.timeoutBtn{
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 8px;
		position: absolute;
		top: 70%;
		right: 3%;
	}
	.cancelBtn{
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 8px;
		position: absolute;
		top: 70%;
		right: 22%;
	}
	.use_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
	}
	.use_time_audit{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #434543;
	}
	.use_time_agree{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #117800;
	}
	.use_time_timeout{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #D60000;
	}
	.use_img{
		max-width: 16px;
		max-height: 16px;
		vertical-align:middle;
		margin-right: 10px
	}
	.use_content{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin: 8px 0;
	}
	.use_time{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
		opacity: 0.6;
	}
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		color: #113A62;
		opacity: 0.6;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding-top: 3px;
	}
	
	.control{
		display: flex;
		justify-content: center;
		padding: 15px;
	}
	
	.control_Btn{
		width: 110px;
		height: 26px;
		background: #E3EDF7;
		box-shadow: 2.60609px 2.60609px 5.21217px rgba(114, 142, 171, 0.1), -7.81826px -7.81826px 26.0609px #FFFFFF, 5.21217px 5.21217px 26.0609px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		line-height: 26px;
		text-align: center;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #113A62;
		opacity: 0.65;
		padding: 8px 25px;
	}
	
	.control_Down{
		width: 110px;
		height: 26px;
		background: #E3EDF7;
		box-shadow: -4px -4px 20px #FFFFFF, inset 4px 4px 14px #C1C8CF;
		border-radius: 5px;
		line-height: 26px;
		text-align: center;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #113A62;
		padding: 8px 25px;
	
	}
	
	.cabAll{
		width: 100%;
		height: 100%;
		overflow-x: auto;
	}
	.cabClick{
		background: #E3EDF7;
		box-shadow: inset -4px -4px 9px rgba(255, 255, 255, 0.6), inset 8px 8px 16px #C5D7EE;
		border-radius: 12px 0px 0px 12px;
		height: 153px;
		width: 40px;
		white-space: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0;
		letter-spacing: 10px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
	}
	.cab{
		background: #E3EDF7;
		/* Card Float */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 12px 0px 0px 12px;
		height: 153px;
		width: 40px;
		white-space: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0;
		letter-spacing: 10px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
	}
	.cabImg{
		max-width: 12px;
		max-height: 16px;
		box-shadow: inset 0px 1px 1px #5A6571;
		margin-right: 10px;
	}
	
	.cabText{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 26px;
		height: 153px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* identical to box height, or 144% */
		color: #113A62;
		opacity: 0.7;
		display: flex;
		flex-direction: column;
		writing-mode:vertical-lr
	}
	
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}
		.material_all{
			width: calc(100% - 55px);
			background: #E3EDF7;
			box-shadow: inset -4px -4px 9px rgba(255, 255, 255, 0.88), inset 4px 4px 14px #C1D5EE;
		}
		.material_title{
			width: 35%;
			/* Chart Title */
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 22px;
			color: rgba(17, 58, 98, 0.45);
			padding: 8px 0 2px 16px;
		}
		.material_titleNumber{
			width: 25%;
			/* Chart Title */
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 22px;
			color: rgba(17, 58, 98, 0.45);
			padding: 8px 0 2px 0px;
		}
		.material_line{
			display: flex;
			background: rgba(255, 255, 255, 0.25);
			border-radius: 4px;
			height: 56px;
			line-height: 56px;
			margin: 2px 0;
			padding-left: 16px;
		}
		.addmaterial_line{
			display: flex;
			background: rgba(255, 255, 255, 0.25);
			border-radius: 4px;
			height: 56px;
			line-height: 56px;
			margin-top: 2px;
			padding-left: 16px;
			/* Card Float */
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		}
		.add_btn{
			width: 24px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			background: #E3EDF7;
			box-shadow: 0.781826px 0.781826px 1.56365px rgba(114, 142, 171, 0.1), -2.34548px -2.34548px 7.81826px #FFFFFF, 1.56365px 1.56365px 7.81826px rgba(111, 140, 176, 0.41);
			border-radius: 0px 4px 4px 0px;
		}
		.text_btn{
			width: 81px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			background-color: rgba(255, 255, 255, 0.45);
			box-shadow: -2.34548px -2.34548px 7.81826px #FFFFFF, inset 1.56365px 1.56365px 5.47278px #C1D5EE;
		}
		.reduce_btn{
			width: 24px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			background: #E3EDF7;
			box-shadow: 0.781826px 0.781826px 1.56365px rgba(114, 142, 171, 0.1), -2.34548px -2.34548px 7.81826px #FFFFFF, 1.56365px 1.56365px 7.81826px rgba(111, 140, 176, 0.41);
			border-radius: 4px 0px 0px 4px;
		}
		.pwd_title{
			width: 100%;
			text-align: center;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			line-height: 40px;
			/* identical to box height, or 167% */
			color: #113A62;
			margin-top: 15px;
		}
		.pwd_all{
			width: 85%;
			margin: auto;
			height: 262px;
			background: #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 16px;
		}
		.materialPopUp{
			width: 188px;
			height: 75px;
			position: absolute;
			top: 72px;
			right: 20px;
		/* 	top: -44px;
			right: 20px; */
			background: #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 12px;
			z-index: 2;
			padding: 15px;
		}
		.triangle{
			width:0px;
			height:0px;
			border-top:14px solid transparent;
			border-bottom:14px solid #E3EDF7;
			border-left:14px solid transparent;
			border-right:14px solid transparent;
			position: absolute;
			top: 38px;
			right: 34px;
			z-index: 2;
		}
		.success{
			width: 80%;
			height: 116px;
			background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 16px;
		}
		.error{
			width: 80%;
			height: 116px;
			background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 16px;
		}
		.success_title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			/* padding: 18px; */
		}
		.success_text{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 22px;
			color: #113A62;
			margin-left: 10px;
		}
		.success_content{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 18px;
			color: #113A62;
			margin-top: 6px;
		}
			
</style>
